<template>
<div>
  <el-scrollbar class="scroll-tree" :style="treeWidth">
    <!--左侧树-->
    <el-tree
        :props="props"
        :load="loadNode"
        lazy
        :highlight-current="true"
        :expand-on-click-node="true"
        :default-expanded-keys="idArr"
        @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node,data }">
              <svg class="icon" aria-hidden="true" v-show="data.orgType ===1">
                <use xlink:href="#icon-org"></use>
              </svg>
              <svg class="icon" aria-hidden="true" v-show="data.orgType ===2">
                <use xlink:href="#icon-dept"></use>
              </svg>
              <svg class="icon" aria-hidden="true" v-show="data.orgType ===3">
                <use xlink:href="#icon-post"></use>
              </svg>
              <svg class="icon" aria-hidden="true" v-show="data.orgType ===4">
                <use xlink:href="#icon-person2"></use>
              </svg>
              <span style="margin-left:5px">{{ node.label }}</span>
            </span>
    </el-tree>
  </el-scrollbar>
</div>
</template>

<script>
export default {
  name: "orgTreePanel",
  data(){
    return{
      props: {
        label: 'name'
      },
      idArr:[""]
    }
  },
  props:{
    width: {
      type: Number,
      default:100
    },
    orgType:{
      type:String,
      default:'ORG|DEPT'
    }
  },
  methods:{
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.getTreeData({id:"",orgType:""},(data)=>resolve(data));
      } else {
        this.getTreeData(node.data,(data)=>resolve(data));
      }
    },
    getTreeData(data,callback){
      let params = {
        fdParentId:data.id,
        fdParentType:data.orgType,
        fdOrgType:this.$props.orgType
      }
      this.$fetch('/api/sys/org/sys_org_element/treeData',params).then((res) => {
        if(res.status===1){
          return callback(res.data);
        }
      });
    },
    handleNodeClick(data) {
      this.$emit('nodeClick',data);
    }
  },
  computed:{
    treeWidth(){
      return 'width:'+this.width+'%';
    }
  },
  dataList(val) {
    if (this.$route.query.source) {
      if (val) {
        this.$nextTick(() => {
          document.querySelector('.el-tree-node__content').click()
        })
      }
    }
  }
}
</script>

<style scoped>
.scroll-tree >>>.el-scrollbar__wrap{
  overflow-x:hidden;
}
</style>